<template>
  <div>
    <div class="inputTopIcon">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-wangyiyunyinle-"></use>
      </svg>
    </div>
    <div class="inputAll">
      <div class="inputTop">
        <p>欢迎登录</p>
      </div>
      <div class="inputValue">
        <van-form @submit="onSubmit">
          <van-field
              v-model="username"
              name="手机号"
              label="手机号"
              placeholder="手机号"
              :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <van-field
              v-model="password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </div>

    </div>
    <div class="inputFooterIcon">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-icon-Music"></use>
      </svg>
    </div>
  </div>
</template>
<style lang="less" scoped>
.inputTopIcon {
  height: 50px;
  width: 100%;
  background: #d43c33;
  position: relative;

  .icon {
    position: absolute;
    width: 4rem;
    height: 5rem;
    top: -1.8rem;

  }
}

.inputFooterIcon {

  display: flex;
  justify-content: center;

  .icon {
    width: 1rem;
    height: 1rem;
  }
}

.inputAll {

  width: 8rem;
  height: 6rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin: 40% auto;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px #ccc;
  border-radius: 1rem;

  .inputTop {

    font-weight: 900;
    font-size: 20px;
    margin-bottom: 20px;
  }

  .inputValue {

  }

}
</style>
<script>

export default {

  data() {
    return {
      name: '',
      username: '123456',
      password: '123456',
    };
  }, methods: {
    async onSubmit() {
      let res = await this.$store.dispatch('getLogin');
      console.log(res);
      if (res.data.code === 200) {
        this.$store.commit('loginValue', true);
        this.$store.commit('changeToken', res.data.createTime,
        );
        this.$store.commit('changUser', res);
        this.$router.push('/layout/friends');
      } else {
        alert('手机号或者密码错误，请重新输入！');
      }

    },
  },
};

</script>
